<template>
    <div class="myBlog-container">
        <tab></tab>
        <div class="myBlog-wrapper base-width">
            <div class="myBlog-left-wrapper">
                <div class="myBlog-wall-wrapper">
                    <div class="myBlog-wall">
                        <img class="myBlog-avatar" :src="userInfo.avatarUrl" alt="">
                    </div>
                    <div class="myBlog-wall-base">
                        <h1 class="username">南山秋木</h1>
                        <button class="user-btn">完善个人信息</button>
                    </div>
                </div>
                <ul class="honour-wall-wrapper">
                    <li class="honour-item" v-for="(item, index) in honourList" :key="index">
                        <div class="honour-num">{{item.num}}</div>
                        <div class="honour-title">{{item.title}}</div>
                    </li>
                </ul>
                <person-article></person-article>
            </div>
            <div class="myBlog-right-wrapper">
                <ul class="userInfo-wrapper">
                    <li class="userInfo-item" v-for="(item, index) in userInfoList" :key="index">
                        <i :class="['iconfont', item.iconfont]"></i>
                        <span>{{item.title}}</span>
                        <span class="userInfo-content">{{item.content}}</span>
                    </li>
                    <li class="synopsis">
                        <h1 class="synopsis-title">个人简介</h1>
                        <p>这家伙很懒,什么都没写~~~</p>
                    </li>
                </ul>
                <ul class="interest-wrapper">
                    <li class="interest-title">兴趣领域</li>
                    <li class="interest-item"># java</li>
                    <li class="interest-item"># Javascript</li>
                    <li class="interest-item"># 大数据</li>
                    <li class="interest-item"># 英语</li>
                </ul>
                <div class="other" style="display: flex;align-items: center; justify-content: center;height: 400px; width: 100%; background-color: #ffff; border-radius: 20px">暂时没有更多信息</div>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
    import tab from '../../base/tab/tab'
    import Footer from '../../base/footer/Footer'
    import PersonArticle from '../../base/personl-article/PersonArticle'
    import { getUserInfo } from "../../common/js/cache";
    export default {
        data () {
            return {
                honourList: [
                    {
                        num: 28345,
                        title: '被访问量'
                    },
                    {
                        num: 3232,
                        title: '文章数量'
                    },
                    {
                        num: 313124,
                        title: '总浏览量'
                    },
                    {
                        num: 2438345,
                        title: '点赞量'
                    },
                    {
                        num: 231,
                        title: '粉丝数'
                    }
                ],
                userInfoList: [
                    {
                        iconfont: 'icon-xunjianrenwulianxirenICON',
                        title: '联系方式',
                        content: '13846786379'
                    },
                    {
                        iconfont: 'icon-youxiang',
                        title: '个人邮箱',
                        content: '1564862994@qq.com'
                    },
                    {
                        iconfont: 'icon-xuexiao',
                        title: '毕业院校',
                        content: '清华大学'
                    },
                    {
                        iconfont: 'icon-danwei3',
                        title: '就职单位',
                        content: '腾讯公司'
                    }
                ]
            }
        },
        created () {
          this.userInfo = getUserInfo()
        },
        components: {
            tab,
            Footer,
            PersonArticle
        }
    }
</script>

<style scoped lang="scss">
    @import "./src/common/scss/variable";
  .myBlog-container {
      background-color: #F5F5F5;
      /deep/.tab-wrapper {
          position: relative;
          background: $bg-tab;
          opacity: 0.83;
      }
      .myBlog-wrapper {
          display: grid;
          grid-template-columns: 1026fr 376fr;
          grid-column-gap: 17px;
          margin: 14px auto;
          .myBlog-left-wrapper {
              max-width: 1026px;
              .myBlog-wall-wrapper {
                  border-radius: 20px;
                  border: 1px solid #fff;
                  .myBlog-wall {
                      width: 100%;
                      height: 382px;
                      background: url("../../assets/images/login-bg.jpg") no-repeat;
                      background-size: cover;
                      .myBlog-avatar {
                          margin: 158px 0 0 66px;
                          width: 193px;
                          height: 193px;
                          border-radius: 50%;
                      }
                  }
                  .myBlog-wall-base {
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                      height: 116px;
                      border-radius: 0 0 20px 20px;
                      padding: 0 45px 0 85px;
                      box-sizing: border-box;
                      background-color: #fff;
                      .username {
                          color: $font-gray;
                          font-weight: 700;
                          font-size: 36px;
                          user-select: text;
                      }
                      .user-btn {
                          padding: 0 20px;
                          line-height: 50px;
                          border-radius: 30px;
                          background-color: rgb(53, 60, 150);
                          text-align: center;
                          font-size: 18px;
                          color: #fff;
                          cursor: pointer;
                          &:focus {
                              outline: none;
                          }
                          &:hover {
                              border: none;
                              outline: none;
                          }
                      }
                  }
              }
              .honour-wall-wrapper {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  height: 200px;
                  border-radius: 20px;
                  padding: 0 75px;
                  margin: 12px 0;
                  text-align: center;
                  background-color: #fff;
                  box-sizing: border-box;
                  user-select: text;
                  .honour-num {
                      line-height: 51px;
                      font-size: 36px;
                      font-weight: 700;
                      color: $font-gray;
                  }
                  .honour-title {
                      line-height: 40px;
                      font-size: 26px;
                      color: #9f9f9f;
                  }
              }
          }
          .myBlog-right-wrapper {
              max-width: 376px;
              user-select: text;
              cursor: text;
              .userInfo-wrapper {
                  padding: 36px 20px 36px 36px;
                  box-sizing: border-box;
                  border-radius: 20px;
                  border: 1px solid $border-color;
                  background-color: #ffffff;
                  overflow: hidden;
                  .userInfo-item {
                      line-height: 33px;
                      color: $font-gray;
                      font-size: 22px;
                      & + .userInfo-item {
                          margin-top: 20px;
                      }
                      .iconfont {
                          margin-right: 4px;
                          font-size: 22px;
                      }
                      .userInfo-content {
                          margin-left: 8px;
                          font-size: 18px;
                      }
                  }
                  .synopsis {
                      margin-top: 80px;
                      line-height: 21px;
                      font-size: 18px;
                      color: #9f9f9f;
                      .synopsis-title {
                          margin-bottom: 8px;
                          line-height: 33px;
                          text-align: center;
                          font-size: 22px;
                          color: $font-gray;
                      }
                  }
              }
              .interest-wrapper {
                  padding-bottom: 20px;
                  margin: 15px 0;
                  border-radius: 20px;
                  color: $font-gray;
                  font-size: 28px;
                  border: 1px solid $border-color;
                  background-color: #ffffff;
                  .interest-title {
                      height: 76px;
                      padding: 0 30px;
                      line-height: 76px;

                      box-sizing: border-box;
                      border-bottom: 1px solid $border-color;
                      user-select: none;
                  }
                  .interest-item {
                      padding: 12px 30px;
                      cursor: pointer;
                  }
              }
          }
      }
  }
</style>
